<script type="text/javascript">
    function hotel_sorting(sel){
        $.ajax({
            type: "GET",
            url: "pages/hotel_index",
            data: { sort: sel.value },
            dataType: "script"
        })
    };
</script>

<nav id="breadcrumbs">
    <ul>
        <li><a href="./">Home</a></li>
        <li><a href="./">Hotel</a></li>
        <li><a href="./">Teades City</a></li>
        <li>Search Result</li>
    </ul>
</nav>     
<article id="content" class="cols-c">
    <div>
        <div class="slider-a">
            <figure class="image-b"><img src="<%=asset_path 'temp/693x276.gif'%>"  alt="Placeholder" width="693" height="276"> <figcaption>Paris Eurostar Breaks</figcaption></figure>
            <figure class="image-a"><img src="<%=asset_path 'temp/693x276(1).gif' %>" alt="Placeholder" width="693" height="276"> <figcaption>Paris Eurostar Breaks <span>Curabitur fringilla mauris interdum nec magna</span> <span>From $350</span></figcaption></figure>
            <figure><img src="<%=asset_path 'temp/693x276(2).gif' %>" alt="Placeholder" width="693" height="276"></figure>
        </div>
        <form action="./" method="post" class="module-b" style="margin-bottom:-5px;">
            <fieldset>
                <nav class="pagination-a">
                    <p>Page 01 of 06</p>
                    <ol style="background-color: white;border: 1px solid #FFFFFF;max-height:30px;">
                        <div id="pagination" class="collection_paginator" style="margin-top:-20px">
                            <%= will_paginate @hotels , :previous_label => '<', :next_label => '>'  %>
                        </div>
                    </ol>
                </nav>
                <p class="select-b">
                    <label for="mba">Short by:</label>
                    <select id="hotel_sort" name="mba" onchange="hotel_sorting(this);">
                        <option value="none">Availability</option>
                        <option value="is_on_promoted">Promoted</option>
                        <option value="stars">Stars</option>
                    </select>
                </p>
                <p class="check-b">
                    <label for="fcba"><input type="radio" id="fcba" name="fcb"> List</label>
                    <label for="fcbb"><input type="radio" id="fcbb" name="fcb"> Map</label>
                </p>
            </fieldset>
        </form>
        <div class="news-a">
        <div id="hotel_list">
            <%= render partial: 'pages/hotel' %>
        </div>   
            <footer>
                <nav class="pagination-a">
                    <div id="pagination" class="collection_paginator">
                        <%= will_paginate @hotels , :previous_label => '<', :next_label => '>'  %>
                    </div>
                    <!-- <p>Page 01 of 06</p>
                    <ol>
                        <li class="prev"><a href="./">Previous</a></li>
                        <li class="active"><a href="./">01</a></li>
                        <li><a href="./">02</a></li>
                        <li><a href="./">03</a></li>
                        <li><a href="./">04</a></li>
                        <li class="next"><a href="./">Next</a></li>
                    </ol> -->
                </nav>
            </footer>
        </div>
    </div>
    <aside>
        <%= form_tag "pages/hotel_index", :method => "GET", :class => "form-c ", :remote => true do %>
            <fieldset>
                <legend>Book now</legend>
                <h3><span>01.</span> What?</h3>
                <nav class="pagination-a">
                    <ul class="check-d">
                        <% PropertyType.all.each do |pt| %>
                            <li>
                                <label for="<%= pt.name_eng %>">
                                    <input type="checkbox" id="<%= pt.name_eng %>" name="property_type[]" value="<%= pt.id %>"><%= pt.name_eng %>
                                </label>
                            </li>
                        <% end %>
                    </ul>
                </nav>
                <h3><span>02.</span> When?</h3>
                <p class="date-a">
                    <span>
                        <label for="fcc">Check in</label>
                        <input type="text" id="fcc" name="search[checkin]" required>
                    </span>
                    <span>
                        <label for="fcd">Check Out</label>
                        <input type="text" id="fcd" name="search[checkout]" required>
                    </span>                         
                </p>
                <h3><span>03.</span> Who?</h3>
                <p class="select-a">
                    <span>
                        <label for="fce">Rooms</label>
                        <select id="fce" name="search[room]">
                            <% 1..10.times do |a| %>
                                <option><%= a +1 %></option>
                            <% end %>
                        </select>
                    </span>
                    <span>
                        <label for="fcf">Person</label>
                        <select id="fcf" name="search[person]">
                            <% 1..10.times do |a| %>
                                <option><%= a +1 %></option>
                            <% end %>
                        </select>
                    </span>
                     </p>
                <p class="submit"><button type="submit">Proceed</button></p>
            </fieldset>
        <% end %>
        <%= form_tag "pages/hotel_index", :method => "GET", :class => "form-d ", :remote => true do %>
            <fieldset>
                <legend>Refine search result</legend>
                <div class="accordion-a">
                    <h3 class="active">Price Range</h3>
                    <div>
                        <div class="bar-price"></div>
                    </div>
                    <h3 class="active">Star Rating</h3>
                    <div>
                        <div class="bar-b"></div>
                    </div>
                    <h3 class="active">Hotels Type</h3>
                    <div>
                        <ul class="check-d">
                            <% PropertyType.all.each do |pt| %>
                                <li>
                                    <label for="<%= pt.name_eng %>_menu">
                                        <input type="checkbox" id="<%= pt.name_eng %>_menu" name="property_type[]" value="<%= pt.id %>"><%= pt.name_eng %>
                                    </label>
                                </li>
                            <% end %>
                        </ul>
                    </div>
                    <h3 class="active">Area</h3>
                    <div>
                        <ul class="check-d">
                            <% Area.all.each do |area| %>
                                <li>
                                    <label for="<%= area.area %>">
                                        <input type="checkbox" id="<%= area.area %>" name="area[]" value="<%= area.id %>"> <%= area.area %>
                                    </label>
                                </li>
                            <% end %>
                        </ul>
                    </div>
                    <h3 class="">Hotel Facilities</h3>
                    <div>
                        <ul class="check-d">
                            <% Facility.all.each do |facility| %>
                                <li>
                                    <label for="<%= facility.facility_name_eng %>">
                                        <input type="checkbox" id="<%= facility.facility_name_eng %>" name="facility[]" value="<%= facility.id %>"> <%= facility.facility_name_eng %>
                                    </label>
                                </li>
                            <% end %>
                        </ul>
                    </div>
                </div>
                <p class="submit"><button type="submit">Search all</button></p>
            </fieldset>
        <% end %>
    </aside>
</article>

